<template
	><main>
		<div class="QAHead">
			<div class="homepagenav">
				<div class="endcenter Horizontalspacing minxgap">
					<div v-if="!fans" class="qzbuttons" @click="follow">
						<span>+</span>
						<span>关注</span>
					</div>
					<el-tag v-else class="fans" type="danger" @click="follow">已关注</el-tag>

					<div class="qzbuttonhuis minixgap">
						<div class="iconfont icon-telegram"></div>
						<span>发私信</span>
					</div>
				</div>
				<div v-if="info" class="center columnLayout fonfff minaxgap">
					<div class="center homepageingbox">
						<el-avatar class="Roundheadportraitbig center" :src="info.Avatar">
							<div class="image-slot iconfont icon-setting-role"></div>
						</el-avatar>
					</div>
					<div class="center Horizontalspacing minaxgap">
						<span v-if="info.nickname" class="center blod">{{ info.nickname }}</span>
						<span v-else class="center blod">{{ info.username }}</span>
						<div class="userqathumbs-up">{{ info.name }}</div>
					</div>
					<div class="center">{{ info.signature }}</div>
				</div>
			</div>
		</div>
		<div class="homepagheader">
			<div class="homepagetnav minfont">
				<div class="center Horizontalspacing minxgap"
					><span>文章</span><span>{{ info.posts }}</span></div
				>
				<div class="center Horizontalspacing minxgap"
					><span>问答</span><span>{{ info.qanum }}</span></div
				>
				<div class="center Horizontalspacing minxgap"
					><span>粉丝</span><span>{{ info.fans }}</span></div
				>
			</div>
		</div>
		<div class="main">
			<div>
				<div class="content">
					<div class="Genericpadding columnLayout">
						<div class="QArectangle">
							<el-tabs class="fincss" v-model="activeName">
								<el-tab-pane label="文章" name="first"><fromlist :userid="userid"></fromlist></el-tab-pane>
								<el-tab-pane label="问答" name="second"><QAList :userid="userid"></QAList></el-tab-pane>
							</el-tabs>
						</div>
						<!-- 帖子 -->
						<!-- 问答 -->
					</div>
				</div>
			</div>
			<div>
				<left></left>
			</div>
		</div>
	</main>
</template>
<script>
import left from './../components/left'
import QAList from './../components/QAList'
import fromlist from './../components/fromlist'
import { dataRequest as api } from '@/api/api'
import { mapState } from 'vuex'
export default {
	name: 'name',
	computed: {
		...mapState(['logon', 'user']),
	},
	components: {
		// 组件
		left,
		QAList,
		fromlist,
	},
	data() {
		return {
			//返回值
			userid: this.$route.params.userid,
			activeName: 'second',
			info: '',
			fans: false,
		}
	},
	methods: {
		// 函数
		async ifuser() {
			if (this.userid) {
				// 获取用户信息
				let array = await api(['userinformation', this.userid])
				console.log(array)
				if (array.code == 200) {
					this.info = array.data
					this.iffollow()
				} else {
					this.$router.push('/some-nonexistent-path') // 这将导航到404页面
				}
			}
		},
		//提交关注
		async follow() {
			// 提交关注和取消关注
			if (this.userid && this.user) {
				let array = await api(['followinterest', { toid: this.userid }])

				if (array.code == 200) {
					console.log('2')
					let arr = await this.iffollow()
					this.ifuser()
					if (arr) {
						// 已关注
						this.$message.success('已关注')
					} else {
						// 取消关注
						this.$message.error('取消关注')
					}
				} else if (array.code == 1001) {
					this.$message.error('不能关注自己')
				}

				// 这里看回调时关注成功还是取消关注
			} else {
				//
				this.$message.error('请先登录')
			}
		},
		// 查看是否关注
		async iffollow() {
			console.log(this.userid)
			let array = await api(['followinterest', { toid: this.userid, fans: 1 }])

			if (array.code == 200) {
				this.fans = array.data
				return array.data
			} else {
				return false
			}
		},
	},
	mounted() {
		// 生命周期:
		this.ifuser()
	},
}
</script>
<style>
.fincss .el-tabs__item {
	font-size: 16px;
	font-weight: bold;
}
</style>
<style scoped>
.fans {
	width: 71.39px;
	height: 31px;
}
.blod {
	font-weight: bold;
}
</style>
